<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Document</title>
    <link rel="stylesheet" href="index2.css">
</head>
<body>
    <div id="box">
        <div class="nav">
            <div class="logo">
                <img src="https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDUvYzE4ZDJlMmViMWExOTc4NzNjYTczOGFiNWZmMGRjNzEucG5n.png">
            </div>  
            <div class="navlist">
                <div>产品</div>
                <div>功能</div>
                <div>关于</div>
                <div>团队</div>
                <div>销售</div>
                <div>项目</div>
                <div>价格</div>
                <div>服务</div>
                <div>评价</div>
                <div>联系</div>
            </div>
        </div>
        <div>
            <el-carousel indicator-position="outside">
                <el-carousel-item v-for="(item,$index) in arr" :key="$index">
                  <div class="imgbox" :style="{backgroundImage:'url('+item.imgurl+')',backgroundSize:'100% 100%'}">
                     <div class="tabletext">
                        <div>{{item.text}}</div>
                        <div>{{item.content}}</div>
                     </div>
                  </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div style="padding-top:10px;">   
            <titlebox title="产品介绍" inco="el-icon-discount" text="亲，本版本是最简单的单页式模板，不需要创建内页一般来说，
            只要半天就可以完成对这个模板的设定哦">
                <div style="padding: 60px 0;">
                    <img src="https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYjU5YzY3YmYxOTZhNDc1ODE5MWU0MmY3NjY3MGNlYmEuanBn.jpg">
                </div>
            </titlebox>
        </div>
        <div style="padding-top: 140px;">
            <titlebox title="模板功能" inco="el-icon-table-lamp" text="这些文字都是可以根据您的需要自行更改的，所以不要怕和您的需要不一样哦.
            图片的话都没有具体的大小要求，合适就好，开心就好">
                <div style="padding:0px 80px;overflow: hidden;">
                    <div class="module_list" v-for="i in 6">
                        <div>
                            <img src="" alt="">
                            <h5>一页式模板</h5>
                        </div>
                    </div>
                </div>
            </titlebox>
        </div>
        <div class="bootme" style="margin-top: 100px;">
            <div class="content_me">
                <titlebox style="color: #fff;" title="关于我们" inco="el-icon-coin" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。">
                    <div style="text-align: center;color: #ff5100;font-size: 18px;">
                        起飞页自主建站平台
                    </div>
                </titlebox>
            </div>
        </div>
        <div style="padding-top:100px;">   
            <titlebox title="我们的团队" inco="el-icon-cold-drink" text="介绍一下您的强大的团队吧。几行热情的自我介绍可以迅速的拉近您和访客的距离。">
                <div class="lbt-banner">
                    <div>
                         <el-carousel :interval="5000" arrow="always" height="416px" background-color="red">
                         <el-carousel-item v-for="item in 2" :key="item">
                             <div class="lii">
                             <div class="img">
                               <img src="https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYmU3YTcyNzAzZjVjZDZjYzc3MmQ0N2E1Y2QyZGJjOTctNDAweDQwMC5qcGc_p_p100_p_3D.jpg" alt="">
                             </div>
                              <div class="lbt-w">
                                
                                 <div class="lbt-wb">
                                     <div class="lbt-title">
                                         <p>彭 少宏</p>
                                         <p>CEO总经理</p>
                                     </div>
                                 </div>
                                 <div class="lbt-text">
                                    <p>您可以双击这里或者点击编辑按钮来修改内容，您可以添加按钮图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容</p>
                                  </div>
                       
                              </div>
                            </div>
                            <div class="lii">
                                <div class="img">
                                  <img src="https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYTNkNDA0Mjg2MmVkNjE3Mzk0M2QwOTQ4M2M5NjM3NGMtNDAweDQwMC5qcGc_p_p100_p_3D.jpg" alt="">
                                </div>
                                 <div class="lbt-w">
                                   
                                    <div class="lbt-wb">
                                        <div class="lbt-title">
                                            <p>张 义栋</p>
                                            <p>工程师</p>
                                        </div>
                                    </div>
                                    <div class="lbt-text">
                                       <p>您可以双击这里或者点击编辑按钮来修改内容，您可以添加按钮图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容</p>
                                     </div>
                          
                                 </div>
                               </div>
                               <div class="lii">
                                <div class="img">
                                  <img src="https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvZmYxNDZkZjNiODBkMmE0M2FmNTZhYzY3Nzk3YWEwZDUtNDAweDQwMC5qcGc_p_p100_p_3D.jpg" alt="">
                                </div>
                                 <div class="lbt-w">
                                   
                                    <div class="lbt-wb">
                                        <div class="lbt-title">
                                            <p>郭 思燕</p>
                                            <p>客服代表</p>
                                        </div>
                                    </div>
                                    <div class="lbt-text">
                                       <p>您可以双击这里或者点击编辑按钮来修改内容，您可以添加按钮图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容</p>
                                     </div>
                          
                                 </div>
                               </div>
                               <div class="lii">
                                <div class="img">
                                  <img src="https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYTI2NzI2YzFlMDJhM2ZiNjRlNWM0MmM0MzEwZWFlMzktNDAweDQwMC5qcGc_p_p100_p_3D.jpg" alt="">
                                </div>
                                 <div class="lbt-w">
                                   
                                    <div class="lbt-wb">
                                        <div class="lbt-title">
                                            <p>梁 亚萍</p>
                                            <p>客服代表</p>
                                        </div>
                                    </div>
                                    <div class="lbt-text">
                                       <p>您可以双击这里或者点击编辑按钮来修改内容，您可以添加按钮图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容</p>
                                     </div>
                          
                                 </div>
                               </div>
                         </el-carousel-item>
                       </el-carousel>
                  </div>
                  </div>
            </titlebox>
            <div class="bootme1">
                <div class="content_me1">
                    <titlebox style="color: #fff;" title="产品销售" inco="el-icon-coin" text="很少人会做第一个吃螃蟹的人，我们不妨避开让人尴尬的数据而展示一些客户愿意看的漂亮数据。">
                        <div>
                            <el-progress type="circle" :percentage="80"  style="color: #FF5100;"></el-progress>
                           
                            <el-progress type="circle" :percentage="80"  style="color: #FF5100;"></el-progress>
                            <el-progress type="circle" :percentage="80"  style="color: #FF5100;"></el-progress>
                            <el-progress type="circle" :percentage="80"  style="color: #FF5100;"></el-progress>
                        </div>
                    </titlebox>
                </div>
            </div>
            <div style="padding-top:100px;">   
                <titlebox title="项目展示" inco="el-icon-discount" text="一个没打过仗的军队很难有说服力，当然打了很多败仗的故事也不会增加任何说服力。所以说说您成功的项目经验吧，如果没有，也可以有哦">
                    <template>
                        <div style="width:100%">
                            <div class="tab">
                                <div class="top">
                                    
                                </div>
                            </div>
                        </div>
                    </template>
                </titlebox>
            </div>
            <div class="bootme2">
                <div class="content_me2">
                    <titlebox style="color: #fff;" title="产品销售" inco="el-icon-coin" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务">
                        <template>
                            <div>
                              <div class="imh">
                                <div class="lin" style="height: 600px;">
                                  <div class="dj-content">
                                    <div class="dj-content-item"  v-for="(i, $index) in dj_arr" >
                                      <div
                                        class="dj-item-top"
                                        :style="{
                                          background:
                                            $index == 1 ? 'rgb(239, 79, 25)' : 'rgb(196,196,196)',
                                          padding: $index == 1 ? '8px 0' : '0',
                                        }"
                                      >
                                        <div class="dj-item-top-title">
                                          <p>{{ i.name }}</p>
                                        </div>
                                      </div>
                                      <div
                                        class="dj-item-bottom"
                                        :style="{
                                          paddingTop: $index == 1 ? '10px' : '0',
                                          height: $index == 1 ? '235px' : '210px',
                                        }"
                                      >
                                        <div class="dj-item-bottom-title">
                                          <span
                                            :style="{ color: $index == 1 ? 'rgb(239, 79, 25)' : '#000' }"
                                            >￥</span
                                          ><span>{{ i.money }}</span
                                          ><span
                                            :style="{ color: $index == 1 ? 'rgb(239, 79, 25)' : '#000' }"
                                            >元/年</span
                                          >
                                        </div>
                                        <div class="dj-item-top-text">
                                          <p>流量5G/每月</p>
                                          <p>空间1G自动</p>
                                          <p>备份每日自动备份</p>
                                          <p>技术支持邮件/QQ/电话</p>
                                        </div>
                                      </div>
                                      <button
                                        :style="{
                                          background: $index == 1 ? 'rgb(239, 79, 25)' : '#fff',
                                          color: $index == 1 ? '#fff' : 'rgb(239, 79, 25)',
                                      }"
                                      >
                                        联系客服
                                      </button>
                                      <!-- <div class="dj-item-lj">
                                        <p>或立即购买</p>
                                      </div> -->
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </template>
                </div>
            </div>
            <div style="padding-top: 40px;">
                <titlebox title="我们的服务" inco="el-icon-table-lamp" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。
                我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。">
                    <div style="padding:0px 80px;overflow: hidden;">
                        <div class="kj">
                            <div class="kll">
                                <h6>服务介绍</h6>
                                <p>応损捠捡换攳，攴朰朲朳枛朸桸桹桺奿妀。夲夳夵壱売壳圢圤圥圦圧！圩圪囡団囤囥咍咎，咐咑厺厼厽桻桼忝忞帄帇帉帊峢</p>
                            </div>
                            <div class="kll">
                                <h6>服务介绍</h6>
                                <p>応损捠捡换攳，攴朰朲朳枛朸桸桹桺奿妀。夲夳夵壱売壳圢圤圥圦圧！圩圪囡団囤囥咍咎，咐咑厺厼厽桻桼忝忞帄帇帉帊峢</p>
                            </div>
                            <div class="kll">
                                <h6>服务介绍</h6>
                                <p>応损捠捡换攳，攴朰朲朳枛朸桸桹桺奿妀。夲夳夵壱売壳圢圤圥圦圧！圩圪囡団囤囥咍咎，咐咑厺厼厽桻桼忝忞帄帇帉帊峢</p>
                            </div>
                            <div class="kll">
                                <h6>服务介绍</h6>
                                <p>応损捠捡换攳，攴朰朲朳枛朸桸桹桺奿妀。夲夳夵壱売壳圢圤圥圦圧！圩圪囡団囤囥咍咎，咐咑厺厼厽桻桼忝忞帄帇帉帊峢</p>
                            </div>
                        </div>
                    </div>
                </titlebox>
            </div>
            <div class="bootme3">
                <div class="content_me3">
                    <titlebox style="color: #fff;" title="客户评价" inco="el-icon-coin" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。">
                        <div class="lbt-banner1">
                            <div style="width: 600px;height: 300px;">
                                 <el-carousel :interval="5000" arrow="always" height="416px">
                                 <el-carousel-item v-for="item in 4" :key="item">
                                     <div class="img1">
                                       <img src="https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTYvMDcvOGY3OTQwZDBlZDFlYjM3NDIwNmMwMWEzMjA3ODY0MGItMTUweDE1MC5qcGc_p_p100_p_3D.jpg" alt="">
                                     </div>
                                      <div class="lbt-w1">
                                         <div class="lbt-text1">
                                             <p>
                                                起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。
                                          </p>
                                         </div>
                                         <div class="lbt-wb1">
                                             <div class="lbt-title1">
                                                 <p>西安某英语培训机构, 代理</p>
                                        
                                             </div>
                                         </div>
                               
                                      </div>
                                 </el-carousel-item>
                               </el-carousel>
                          </div>
                          </div>
                    </titlebox>
                </div>
            </div>
            <div class="bootme4">
                <div class="bootme4_left">
                    <titlebox style="color: #000;" title="联系我们" inco="el-icon-apple">
                        <input type="text" value="姓名" style="width: 600px;height: 35px;font-size: 14px;outline: none;border: none;border: 1px solid #ccc;color: #999;">
                        <input type="text" value="邮箱" style="width: 600px;height: 35px;font-size: 14px;outline: none;border: none;border: 1px solid #ccc;color: #999;margin-top: 10px;">
                        <textarea name="留言" style="background-color: #ffffff;border: 1px solid #ccc;font-size: 14px;margin-top: 10px;outline: none;" cols="3" rows="25">留言</textarea>
                    </titlebox>
                    <span class="fa" style="display: inline-block;margin-left: 270px; margin-top: 30px; width: 100px;height: 36px;color: #fff; font-size: 14px;line-height:36px;background-color: #333333;border: 1px solid #333333;text-align: center;">发送</span>
                </div>
                <div class="bootme4_right">
                    <div class="content_me4">
                    <titlebox style="color: #fff;" title="关注我们" inco="el-icon-connection">
                        <p style="font-size: 14px;color:#D3D3D3;padding-top: 6px; width: 600px;margin: 0 auto;">起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。</p>
                            <div style="padding-top: 30px;">
                                <el-row>
                                    <el-button icon="el-icon-search" circle></el-button>
                                    <el-button type="qq" icon="el-icon-edit" circle></el-button>
                                    <el-button type="wechat" icon="el-icon-check" circle></el-button>
                                    <el-button type="micro-blog" icon="el-icon-message" circle></el-button>
                            
                                  </el-row>
                            </div>
                    
                    </titlebox>
                </div>
                </div>
            </div>
    </div>
    <script src="./vue.js"></script>
     <script src="./index3.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
   

<script>
    Vue.component('lee', {
        template:'#lee',
            data() {
        return {
            activeName: 'second'
        };
        },
        methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        }
        }
    })
    new Vue({
        el:'#box',
        data:{
            arr:[
                {
                    imgurl:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTgvMTAvMDNkYTM3MTQ2YjA1YzM5MTM1YWFjYWE4YTdlZDNkZDguanBn.jpg',
                    text:'我在灯火阑珊处',
                    content:'起飞页是放飞梦想的地方，也是寻梦的地方'
                },
                {
                    imgurl:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNzliN2NkY2QxNGRiMTRlOWNiNDk4ZjE3OTM4MTdkNjkuanBn.jpg',
                   
                    text:'做一个精彩的站点',
                    content:'为情怀而干杯，告别朴素的重复和一望无际的平庸'
                }
            ],
            arr1: [
            '活动策划 |', 
            '画册设计 |',
            '电影宣传片制作 |'
            ],
            n:0,
            
            dj_arr: [
                        { name: "基础班", money: 99 },
                        { name: "高级版", money: 159 },
                        { name: "终极版", money: 129 },
      ],
        },
        methods:{
        btn(ind){
            this.n = ind
            console.log(this.n)
        },
        btn1(){
            // this.offsetTop = 
        }
  
        },
        
    })
</script>
</body>
</html>